<template>
  <div p-5>
    <DynamicTable
      bordered
      :data-request="loadData"
      :columns="columns"
      row-key="id"
      @resize-column="handleResizeColumn"
      :scroll="{
        y: 'calc(100vh - 330px)',
      }"
      :row-selection="rowSelection"
    >
    </DynamicTable>
  </div>
</template>
<script setup lang="ts">
  import { columns } from './columns';
  import { ref, reactive } from 'vue';

  import type { TableRowSelection } from 'ant-design-vue/es/table/interface';
  import { useTable, type OnChangeCallbackParams } from '@/components/core/dynamic-table';
  const [DynamicTable] = useTable();
  const selectedFileList = ref<API.File[]>([]);

  const loadData = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = {
      current: 1,
      orders: [],
      pages: 1,
      records: [
        {
          id: '1',
          userLogin: '15588882525',
          userName: '张三',
          operationType: '3',
          action: '设备资产管理-设备台账-删除',
          operationTime: '2021-02-03 12:11:12',
        },
        {
          id: '2',
          userLogin: '15588882525',
          userName: '系统管理员',
          operationType: '1',
          action: '设备资产管理-设备台账-新增',
          operationTime: '2021-02-03 12:11:12',
        },
        {
          id: '3',
          userLogin: '15588882525',
          userName: '张三',
          operationType: '2',
          action: '设备资产管理-设备台账-编辑',
          operationTime: '2021-02-03 12:11:12',
        },
        {
          id: '4',
          userLogin: '15588882525',
          userName: '张三',
          operationType: '2',
          action: '设备资产管理-设备台账-编辑',
          operationTime: '2021-02-03 12:11:12',
        },
        {
          id: '5',
          userLogin: '15588882525',
          userName: '张三',
          operationType: '2',
          action: '设备资产管理-设备台账-编辑',
          operationTime: '2021-02-03 12:11:12',
        },
        {
          id: '6',
          userLogin: '15588882525',
          userName: '张三',
          operationType: '2',
          action: '设备资产管理-设备台账-编辑',
          operationTime: '2021-02-03 12:11:12',
        },
        {
          id: '7',
          userLogin: '15588882525',
          userName: '张三',
          operationType: '2',
          action: '设备资产管理-设备台账-编辑',
          operationTime: '2021-02-03 12:11:12',
        },
        {
          id: '8',
          userLogin: '15588882525',
          userName: '张三',
          operationType: '2',
          action: '设备资产管理-设备台账-编辑',
          operationTime: '2021-02-03 12:11:12',
        },
        {
          id: '9',
          userLogin: '15588882525',
          userName: '张三',
          operationType: '2',
          action: '设备资产管理-设备台账-编辑',
          operationTime: '2021-02-03 12:11:12',
        },
        {
          id: '10',
          userLogin: '15588882525',
          userName: '张三',
          operationType: '2',
          action: '设备资产管理-设备台账-编辑',
          operationTime: '2021-02-03 12:11:12',
        },
      ],
      searchCount: true,
      size: 10,
      total: 15,
    };

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  const handleResizeColumn = (w, col) => {
    col.width = w;
  };
  const rowSelection = reactive<TableRowSelection<API.NetdiskManageListItem>>({
    selectedRowKeys: [],
    onChange: (selectedRowKeys: Key[], selectedRows) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      rowSelection.selectedRowKeys = selectedRowKeys;
      selectedFileList.value = selectedRows.map((n) => ({ type: n.type, name: n.name }));
    },
  });
</script>
<style scoped lang="less"></style>
